<template>
  <view class="pageContent" >
    <view class="memberMain">
        <view class="memberItem">
          <view class="memberItTi">成员真名</view>
          <view class="memberItVa">{{formData.name || '成员真名'}}</view>
        </view>
        <view class="memberItem">
          <view class="memberItTi">成员身份</view>
          <view class="memberItVa">{{formData.roleName || ''}}</view>
        </view>
        <view class="memberItem">
          <view class="memberItTi">身份证号</view>
          <view class="memberItVa">{{formData.idCardNumber || ''}}</view>
        </view>
        <view class="memberItem">
          <view class="memberItTi">出生年月</view>
          <view class="memberItVa">{{formData.birthday || ''}}</view>
        </view>
        <view class="memberItem">
          <view class="memberItTi">性<text style="color: #fff;">性别</text>别</view>
          <view class="memberItVa">{{formData.sex==0 ? '男':'女'}}</view>
        </view>
        <view class="memberItem">
          <view class="memberItTi">手机号码</view>
          <view class="memberItVa">{{formData.telephone || ''}}</view>
        </view>
        <view class="memberItem">
          <view class="memberItTi">门禁期限</view>
          <view class="memberItVa">{{formData.expireDate || '永久有效'}}</view>
        </view>
        <view class="memberItem" v-if="formData.idCardFrontUrl || formData.idCardBackUrl">
          <view class="memberItTi">证件照片</view>
          <view class="memberUpload">
              <image class="memberUpTrueIc" v-if="formData.idCardFrontUrl" :src="formData.idCardFrontUrl" @click="showPhoto(formData.idCardFrontUrl)"/>
              <image class="memberUpTrueIc" v-if="formData.idCardBackUrl" :src="formData.idCardBackUrl" @click="showPhoto(formData.idCardBackUrl)"/>
          </view>
        </view>
        <view class="memberItem" v-if="formData.leaseContractOneUrl || formData.leaseContractTwoUrl || formData.leaseContractThreeUrl || formData.leaseContractFourUrl">
          <view class="memberItTi">租赁合同</view>
          <view class="memberUploadLea">
              <image class="memberUpLeaMa" v-if="formData.leaseContractOneUrl" :src="formData.leaseContractOneUrl" @click="showPhoto(formData.leaseContractOneUrl)"/>
              <image class="memberUpLeaMa" v-if="formData.leaseContractTwoUrl" :src="formData.leaseContractTwoUrl" @click="showPhoto(formData.leaseContractTwoUrl)"/>
              <image class="memberUpLeaMa" v-if="formData.leaseContractThreeUrl" :src="formData.leaseContractThreeUrl" @click="showPhoto(formData.leaseContractThreeUrl)"/>
              <image class="memberUpLeaMa" v-if="formData.leaseContractFourUrl" :src="formData.leaseContractFourUrl" @click="showPhoto(formData.leaseContractFourUrl)"/>
          </view>
        </view>
        <view class="memberItem" v-if="formData.applyReason">
          <view class="memberItTi">留<text style="color: #fff;">性别</text>言</view>
          <view class="memberItVa">{{formData.applyReason}}</view>
        </view>
        <view class="memberItem" v-if="formData.message">
          <view class="memberItTi">审批意见</view>
          <view class="memberItVa">{{formData.message}}</view>
        </view>
    </view>

    <view class="memberHouse" v-if="formData.roomInfo">
      <view class="">关联房屋</view>
      <view class="memberHouseRi">{{formData.roomInfo+'-'+formData.roomName}}</view>
    </view>

  </view>
</template>

<script>
import { mapState } from 'vuex'
import config from '../../../../static/config.js'
import util from '../../../../static/utils/util.js'
export default {
  data () {
    return {
      images: config.images,
      localImages: config.localImages,
      password: '',
      headList: [
          { value: 1, name: '租户',},
          { value: 2, name: '父母',},
          { value: 3, name: '小孩',},
          { value: 3, name: '朋友',},
      ],
      headIndex:-1,
      perList: [
          { value: 1, name: '男',},
          { value: 2, name: '女',},
      ],
      perIndex:0,
      formData:{
        name:"",
        date:"",
        dateLim:"",
        housename:"房屋1",
      },
      placeholder:'请填写与身份证上的姓名一致',
      placeholder2:'请填写与身份证号出身年月一致',
      placeholder3:'请填写出生地',
      placeholder4:'请填写手机号',
      placeholder5:'请选择门禁期限',
      date: '',
      dateLim: '',
    }
  },
  computed: {
    ...mapState({
      myInfo: state => state.user.myInfo
    })
  },
  onLoad(options) {
    var title='成员详情'
    this.id=options.id || 289;
    this.type=options.type || 0;
    if(this.type==1){
      var title='审批详情'
    }
    wx.setNavigationBarTitle({title: title})
    if(options.json){
      var json=JSON.parse(options.json)
      console.warn('json',json)
      this.urlContact(json)

    }else {
      this.approva();
    }
    // var url="http://192.168.0.246:9000/picture/owner/2021-04-21/1619006106555.jpg"
    // this.showPhoto(url);
  },
  onShow(){
    util.socketTest();
  },
  onUnload(){
    //清空数据
    this.formData={}
  },
  methods: {
    showPhoto(...url){
      console.warn('showPhoto',url)
      wx.previewImage({
        current: '', // 当前显示图片的http链接
        urls: url // 需要预览的图片http链接列表
      })
    },
    //拼接图片地址
    getFullPath(url){
      return config.IMAGE_APIHOST +url;
    },

    approva() {
      var params={roomApplyId :this.id,}
      util.wxRequestPro('/UserServer/owner/info/approva',params)
      .then((res)=>{
        console.warn('approva',res)
        var json=res.param;
        this.formData=json;
        // this.urlContact(json)
      })
    },

    urlContact(json){
      if(json.idCardFrontUrl) {
        // json.idCardFrontUrl=getFullPath(json.idCardFrontUrl);
        json.idCardFrontUrl=config.IMAGE_APIHOST +json.idCardFrontUrl;
      }
      if(json.idCardBackUrl) {
        json.idCardBackUrl=config.IMAGE_APIHOST +json.idCardBackUrl;
      }
      if(json.leaseContractOneUrl) {
        json.leaseContractOneUrl=config.IMAGE_APIHOST +json.leaseContractOneUrl;
      }
      if(json.leaseContractTwoUrl) {
        json.leaseContractTwoUrl=config.IMAGE_APIHOST +json.leaseContractTwoUrl;
      }
      if(json.leaseContractThreeUrl) {
        json.leaseContractThreeUrl=config.IMAGE_APIHOST +json.leaseContractThreeUrl;
      }
      if(json.leaseContractFourUrl) {
        json.leaseContractFourUrl=config.IMAGE_APIHOST +json.leaseContractFourUrl;
      }
      this.formData=json;
    },

  }
}
</script>

<style lang="stylus" scoped>
.pageContent{
  height 100vh
  background $background
  padding: 20rpx 0rpx 0rpx 0rpx;
}
.memberMain{
  background-color #FFFFFF
  padding: 30rpx 30rpx 20rpx 30rpx;
}
.memberItem{
  display flex
  font-size: 30rpx;
  padding: 0rpx 0rpx 20rpx 0rpx;
  // border: 1rpx solid #999999;
}
.memberItTi{
  width 130rpx;
  color: #333333;
  margin-right 40rpx;
  text-align:justify;
  white-space nowrap
  // border: 1rpx solid coral;
}
.memberItVa{
  color: #666666;
}
.memberRight{
  display flex
  height 90rpx
  width 100%
  align-items center
  border-bottom: 1rpx solid #E7E7E7;
  // border: 1rpx solid darkgreen;
}

.memberItIn{
  width 88%
  // border: 1rpx solid #E7E7E7;
}
.memberItIc{
  width: 35rpx;
  height: 30rpx;
  // background: #237DE4;
  margin: 0rpx 10rpx 0rpx 20rpx;
}
.perType{
  display inline-block
  width: 90rpx;
  height: 45rpx;
  line-height: 45rpx;
  border-radius: 4rpx;
  text-align center
  margin-right 20rpx
  color $primary
  border: 1rpx solid $primary;
}
.perType.select{
  background-color $primary
  color: #FFFFFF;
}

.memberUpload{
  display flex
  width 100%
  justify-content space-between
  // padding: 20rpx 0rpx 20rpx 0rpx;
  // border: 1rpx solid #E7E7E7;
}
.memberUpTrueIc{
  display inline-block
  vertical-align top
  width: 230rpx;
  height: 152rpx;
  // border: 1rpx solid aqua;
}
.memberUploadLea{
  display flex
  width 100%
  padding: 20rpx 0rpx 20rpx 0rpx;
  // border-bottom: 1rpx solid #E7E7E7;
  // border: 1rpx solid aqua;
}
.memberUpLeaMa{
  display inline-block
  width: 124rpx;
  height: 84rpx;
}
.memberUpLeaMa:nth-child(n+2){
  margin-left 8rpx;
}
.memberUpLea{
  display inline-block
  width: 124rpx;
  height: 84rpx;
}
.comePicRight{
  position relative
  display flex
  height 90rpx
  width 100%
  align-items center
  border-bottom: 1rpx solid #E7E7E7;
}
.comePicLim{
  position absolute
  right 10rpx
  top 26rpx
  width: 35rpx;
  height: 30rpx;
  // background: #237DE4;
  margin: 0rpx 10rpx 0rpx 0rpx;
}
.btOne{
  margin: 40rpx 0rpx 0rpx 0rpx;
}

.memberHouse{
  display flex
  flex-direction row
  justify-content space-between
  background-color #fff;
  margin: 20rpx 0rpx 0rpx 0rpx;
  padding: 30rpx 30rpx 30rpx 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
}
.memberHouseRi{
  max-width 480rpx
}
</style>
